<template>
  <div>
    <el-dialog v-dialogDrag :close-on-click-modal="false" title="导入" :visible.sync="open" width="520px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="120px">
        <!-- <div class="tip_info margin_b20">
          <div class="item flex_ac">
            <div class="dark">温馨提示：</div>
            <a :href="temp" class="margin_a flex_ac" download="店铺模板.xlsx"><img src="@/assets/down.png" alt="">下载专属导入模板</a>
          </div>
          <div class="item flex_ac" style="white-space: pre-line;" v-html="desc">
          </div>
        </div> -->


        <el-form-item label="上传文件" prop="xls_file">
          <div class="tip_info" style="text-align: center; padding: 20px 0;">
          <div v-if="!form.xls_file">文件后缀名必须为xlsx，文件大小不可大于10M；</div>
          <div v-if="form.xls_file" class="flex_ac_jc file_info"><img style="height: 20px; margin-right: 5px;" src="@/assets/xlsx.png" alt="">{{fileList[0].name}}</div>
          <el-upload
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            Authorization
            :headers="headers"
            class="upload-demo"
            ref="upload"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :action="url"
            :multiple="false"
            :limit="1"
            name="file"
            :data="{project_id:form.project_id}"
            :on-change="change"
            :on-remove="handleRemove"
            :file-list="fileList"
            :show-file-list="false"
            :auto-upload="false">
            <el-button slot="trigger" size="medium" class="margin_t10" type="primary">{{form.xls_file?'修改文件':'选择文件'}}</el-button>
          </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open=false;">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">{{is_ajax?'保存中···':'确定'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'import',
  data () {
    return {
      is_ajax:false,
      open:false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        xls_file: [
          { required: true, message: "请选择xlsx文件", trigger: "blur" }
        ]
      },

      fileList:[],
      type:'',  //1 客户供应商
      url:this.http+'/api/Upload/image',
      title:'',
      temp:'',
      headers: {
          'Authorization': this.getState().token,
      },
      file_length:0,
      desc:'',
      submit_url:''
    }
  },
  created() {

  },
  methods:{
    init(id,type){
      this.form={
        project_id:id,
        xls_file:''
      };
      if(type==1){
        this.submit_url='/api/machine_room.MachineRoom/deviceImport'
      }
      if(type==2){
        this.submit_url='/api/machine_room.MachineRoom/postImport'
      }
      this.is_ajax=false;
      this.fileList=[];
      this.open=true;
      // this.get_temp()
    },

    handleUploadSuccess(res,file, fileList) {
      if(res.status==200){
        this.axios.post(this.submit_url, {file_id:res.data.id,id:this.form.project_id}).then((res) => {
            if (res) {
                this.tip_show('导入成功','success')
                this.open=false;
                this.$emit("handleUploadSuccess", {});
            } else {
                this.$message.error(res.message);
            }
            this.is_ajax=false;
        }).catch((err) => {
            console.log(err);
            this.is_ajax=false;
        });
      }else{
        this.is_ajax=false;
        this.fileList=[];
        this.tip_show(res.message,'error')
      }
    },
    handleUploadError(){
      this.is_ajax=false;
      this.fileList=[];
      this.tip_show('导入失败','error')
    },
    submitUpload() {
      this.is_ajax=true;
      this.$refs.upload.submit();
    },
    change(file, fileList){
      this.fileList=[fileList[fileList.length-1]];
      this.form.xls_file=fileList.length>0?1:''
    },
    handleRemove(file, fileList) {
      this.form.xls_file=fileList.length>0?1:''
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitUpload()
        }
      });
    },
  }
}
</script>

<style scoped>
  .tip_info{background: #F5F6FA; line-height: 22px; border-radius: 4px; padding: 12px 16px; color: #828696;}
  .tip_info .dark{padding-bottom: 5px;}
  .tip_info .item{padding: 5px; color: #1F2329;}
  .tip_info a{color: #004EA2;}
  .tip_info a img{margin-right: 5px;}
</style>
